<template>
  <div id="orderConfirm" style="padding-bottom: 1.2rem;">
    <load-more tip="加载数据中..." v-if="!isloading"></load-more>
    <div v-if="isloading">
      <div class="penson vux-1px-t">
        <div class="headimg"><img :src="dataObj.face? dataObj.face: '../../static/img/noheadpic.png'" /></div>
        <div class="flex-auto">
          <p class="flex flex-middle">
            <span class="overflowtext" style="font-size: 0.32rem;">{{dataObj.nick_name || '未设置昵称'}}</span>
            <i class="icon icon-qiye"></i>
          </p>
          <div class="flex flex-middle">
            <rater disabled v-model="dataObj.comment_score" active-color="#ff9800"></rater>
            <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">{{dataObj.comment_score}}<span style="font-size: 0.24rem;">分</span></span>
          </div>
          <p class="flex text-gray" style="line-height: 0.34rem;">
            <i class="icon icon-map" style="font-size: 0.3rem;"></i>
            <span class="overflowtext">{{dataObj.location}}</span>
            <i class="icon icon-daohang" style="font-size: 0.3rem; color: #0d83d3;"></i>
          </p>
        </div>
        <div class="other text-orange text-right" style="width: 1.4rem"><small>￥</small>{{dataObj.freight}}</div>
      </div>

      <div class="card" style="padding: 0.2rem;padding-bottom: 0px;">
        <card style="background: #fff; box-shadow: 0 0 0.1rem rgba(0,0,0,0.1);">
          <div slot="content">
            <div class="goto vux-1px-b">
              <p>取货时间</p>
              <p class="text-orange"><b>{{dataObj.pick_up_time_pc}} 之前</b></p>
            </div>
            <div class="vux-1px-b" style="padding-left: 0.8rem; padding-right: 0.3rem;">
              <div class="position vux-1px-b">
                <i class="icon icon-quan1"></i>
                <p class="overflowtext">{{dataObj.p_addr}}{{dataObj.p_addr_more}}</p>
                <p>{{dataObj.p_phone}}</p>
              </div>
              <div class="position vux-1px-b" v-for="item in dataObj.get_addrs">
                <i class="icon icon-quan1" style="color: #ff5722;"></i>
                <p class="overflowtext">{{item.get_addr}}{{item.get_addr_more}}</p>
                <p>{{item.get_phone}}</p>
              </div>
            </div>
            <div class="flex t-configs vux-1px-b">
              <div class="flex-auto vux-1px-r">
                {{dataObj.service_info}}
                {{dataObj.goods_info}}
                {{dataObj.package || ''}}
                <span v-if="dataObj.weight && type == 'chengjizhengche'">{{dataObj.weight}}{{dataObj.unit || '吨'}} / </span>
                <span v-if="dataObj.volume && type == 'chengjizhengche'">{{dataObj.volume}}方</span>
              </div>
            </div>
            <div class="flex t-configs vux-1px-b" v-if="type == 'lingdanzhuanxian' || type == 'tongchengzhuanche'">
              <div class="flex-auto">
                <span v-if="dataObj.weight">重量:{{dataObj.weight}}{{dataObj.unit || '吨'}}</span>
                <span v-if="dataObj.volume">体积:{{dataObj.volume}}方</span>
                <span v-if="dataObj.number">数量:{{dataObj.number}}件</span>
              </div>
            </div>
            <div class="flex t-configs vux-1px-b" v-if="type == 'tongchengzhuanche' || type == 'chengjizhengche'">
              <div class="flex-auto">
                {{dataObj.car_id}}  {{dataObj.car_length}}
              </div>
            </div>
            <div class="flex t-configs vux-1px-b">
              <div class="flex-auto">
                {{dataObj.extra_need}}
                {{dataObj.personality_need}}
              </div>
            </div>
          </div>
        </card>
      </div>
      <div class="baoxian flex flex-middle flex-space-between vux-1px" @click="showInsurance = true">
        <span style="margin-right: 0.2rem; display: inline-block;">货物保险 <i class="icon icon-gantanhao text-gray"></i></span>
        <span class="text-gray flex-auto">{{ insurance.baoe ? insurance.baoxian + '元 ' + insurance.baoe + '元' : '选择购买货物保险'}}</span>
        <span class="tj">推荐</span>
      </div>
      <div class="footer-action">
        <x-button type="primary" :show-loading="btnLoading"  action-type="button" @click.native="handleConfirm">确认</x-button>
      </div>
    </div>

    <div class="amap-wrapper" :class="{'amap-wrapper-show': showInsurance}" :style="{minHeight: $store.state.bodyHeiht}">
      <insurance
        @on-cancle="showInsurance = false"
        @on-submit="insuranceSub"
        server-type="2"
        :insurance-data="insurance"
      ></insurance>
    </div>
  </div>
</template>
<script>
import PubHeader from '../components/PubHeader.vue'
import { Rater, LoadMore, Alert } from 'vux'
import { setObjectVal, isWechat, getWechatConfig, toPayWechat } from '../libs/fn'
import Insurance from '../components/Insurance.vue'

export default{
  name: 'orderConfirm',
  components: {
    PubHeader,
    LoadMore,
    Rater,
    Alert,
    Insurance
  },
  computed: {
    type(){
      return this.$store.state.orderType
    }
  },
  created() {
    if(!this.$store.state.orderType) {
      this.$router.push('/')
    }
    const {oid, other_uid} = this.$route.query

    if(oid && other_uid) {
      this.$http.post(this.url[this.type],qs.stringify({
        oid,
        other_uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token,
        uid: this.$store.state.userInfo.uid
      })).then((res) => {
        this.isloading = true
        const {code, msg, data} = res.data
        if(code == '1' && data) {
          if(data.status != 1) {
            this.$router.push('inDispatch')
            return
          }
          this.dataObj = data
          this.dataObj.comment_score = +(data.comment_score)
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    }
    if(isWechat()) {
      const path = this.$route.path
      getWechatConfig(path, this.$store.state.userInfo.uid, this.$store.state.userInfo.token)
    }
  },
  data() {
    return {
      url: {
        tongchengzhuanche: $config.host + '/api/Inquirycitycar/getQuotesInfo',
        lingdanzhuanxian: $config.host + '/api/Inquiryzerobear/getZeroOrderInfo',
        chengjizhengche: $config.host + '/api/Inquirycityvehicle/getOrderInfo'
      },
      subUrl: {
        tongchengzhuanche: $config.host + '/api/Inquirycitycar/confirmQuotes',
        lingdanzhuanxian: $config.host + '/api/Inquiryzerobear/confirmQuotes',
        chengjizhengche: $config.host + '/api/Inquirycityvehicle/confirmQuotes'
      },
      uid: this.$store.state.userInfo.uid,
      data3: 4,
      btnLoading: false,
      isloading: false,
      dataObj: [],
      showInsurance: false,
      insurance: { //保险
        baoxian: '',
        baoe: ''
      }
    }
  },
  methods: {
    handleConfirm() {
      if(this.insurance.baoe > 0) {
        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: '系统将从您的<br />账户中扣除<b class="text-orange">' + this.insurance.baoe + '</b>元保费',
          confirmText: '确认扣除',
          cancelText: '我再想想',
          onConfirm: () => {
            this.subOrder()
          }
        })
      } else {
        this.subOrder()
      }
    },
    subOrder() {
      const {oid, other_uid} = this.$route.query
      const formItem = {
        uid: this.uid,
        other_uid,
        oid,
        baofei: this.insurance.baoe,
        baoe: this.insurance.baoxian,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      }
      this.btnLoading = true
      this.$http.post(this.subUrl[this.type], qs.stringify(formItem)).then((res) => {
        const {code, data, msg} = res.data
        if(code == '1') {
          this.$vux.toast.text(msg, 'middle')
          this.$router.go(-2)
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else if (code == '4') {
          this.$vux.confirm.show({
            title: '<i class="icon icon-gantanhao"></i>',
            content: '您的余额不足以支付<br>还需支付<b class="text-orange">' + data.tobepay +'</b>元',
            confirmText: '去支付',
            cancelText: '取消',
            onConfirm: () => {
              this.topay(data.tobepay)
            },
            onCancel: () => {
              this.btnLoading = false
            }
          })
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
        this.btnLoading = false
      }).catch((err) => {
        this.btnLoading = false
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    topay(money) {
      if(isWechat()) {
        this.btnLoading = false
        toPayWechat(parseFloat(money).toFixed(2), {
          uid: this.uid,
          token: this.$store.state.userInfo.token
        }, () => {
          this.subOrder()
        })
      }
    },
    insuranceSub(v) {
      const data = setObjectVal(v)
      this.showInsurance = false
      this.insurance = data
    }
  }
}
</script>
<style scoped>
  .footer-action{
    height: 1.1rem;
    background: #f3f4f5;
    position: fixed;
    bottom:0rem;
    right:0.2rem;
    left: 0.2rem;
    text-align: center;
  }
  .baoxian{
    height: 1rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    background: #fff;
    margin: 0.2rem;
  }
  .baoxian .icon{
    font-size: 0.28rem;
  }
  .baoxian .tj{
    padding: 0rem 0.1rem;
    background: #ff7f63;
    color: #fff;
    border-radius: 0.05rem;
    font-size: 0.24rem;
  }
</style>
